<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>插入视频</title>
    <link href="${ctxStatic}/video-js/video-js.min.css" rel="stylesheet">
    <style type="text/css">
        body {
            margin: 0px;
        }

        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }

        .video-js .vjs-time-control {
            display: block;
        }

        .video-js .vjs-remaining-time {
            display: none;
        }

        .video-js.vjs-playing .vjs-tech {
            pointer-events: auto;
        }
    </style>
</head>
<body>
<div class="">
    <video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster="${videoResource.posterUrl}">
        <source src="${videoResource.path}" type="video/mp4"></source>
    </video>
</div>

<script type="text/javascript" src="${ctxStatic}/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/video-js/video.min.js"></script>
<script type="text/javascript">
    var width = $($('.video_iframe_${videoResource.id}', parent.document)[0]).width();
    var height = $($('.video_iframe_${videoResource.id}', parent.document)[0]).height();
    var player = videojs('video1', {
        controls: true,
        width: width,
        height: height
    });
</script>
</body>
</html>